<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信访分析系统 - 登录</title>
    <script src="./static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="./static/vendor/css/font-awesome-6.4.0.all.min.css">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        
        @keyframes floating {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .slide-in {
            animation: slideIn 0.5s ease-out;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body class="bg-slate-50">
    <div class="min-h-screen flex items-center justify-center relative overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute inset-0 overflow-hidden">
            <div class="absolute -top-40 -right-40 w-80 h-80 bg-purple-300 rounded-full opacity-20 blur-3xl"></div>
            <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-indigo-300 rounded-full opacity-20 blur-3xl"></div>
        </div>
        
        <!-- 登录容器 -->
        <div class="relative z-10 w-full max-w-md mx-4">
            <div class="glass-effect rounded-2xl shadow-2xl p-8 slide-in">
                <!-- Logo和标题 -->
                <div class="text-center mb-8">
                    <div class="w-20 h-20 mx-auto mb-4 rounded-2xl gradient-bg flex items-center justify-center floating">
                        <i class="fas fa-file-contract text-white text-3xl"></i>
                    </div>
                    <h1 class="text-3xl font-bold gradient-text mb-2">信访分析系统</h1>
                    <p class="text-slate-600">智能信访数据分析平台</p>
                </div>
                
                <!-- 登录表单 -->
                <form id="loginForm" class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">用户名</label>
                        <div class="relative">
                            <i class="fas fa-user absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                            <input type="text" id="username" class="w-full pl-10 pr-4 py-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" placeholder="请输入用户名" required>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-2">密码</label>
                        <div class="relative">
                            <i class="fas fa-lock absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                            <input type="password" id="password" class="w-full pl-10 pr-12 py-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all" placeholder="请输入密码" required>
                            <button type="button" id="togglePassword" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400 hover:text-slate-600">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 记住密码和忘记密码 -->
                    <div class="flex items-center justify-between">
                        <label class="flex items-center">
                            <input type="checkbox" id="rememberMe" class="w-4 h-4 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500">
                            <span class="ml-2 text-sm text-slate-600">记住密码</span>
                        </label>
                        <a href="#" id="forgotPassword" class="text-sm text-indigo-600 hover:text-indigo-800">忘记密码？</a>
                    </div>
                    
                    <!-- 登录按钮 -->
                    <button type="submit" class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:shadow-lg transform hover:scale-[1.02] transition-all duration-200">
                        登录系统
                    </button>
                </form>
                
                <!-- 分割线 -->
                <div class="relative my-6">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-slate-300"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white text-slate-500">或</span>
                    </div>
                </div>
                
                <!-- 快速登录 -->
                <div class="text-center">
                    <p class="text-sm text-slate-600 mb-4">快速登录</p>
                    <div class="flex justify-center space-x-4">
                        <button class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center hover:bg-blue-200 transition-colors">
                            <i class="fab fa-weixin text-green-600 text-xl"></i>
                        </button>
                        <button class="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center hover:bg-slate-200 transition-colors">
                            <i class="fas fa-fingerprint text-slate-600 text-xl"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 版权信息 -->
            <div class="text-center mt-6 text-sm text-slate-500">
                <p>&copy; 2024 博沃智慧. All rights reserved.</p>
            </div>
        </div>
        
        <!-- 忘记密码模态框 -->
        <div id="forgotPasswordModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4 slide-in">
                <h3 class="text-xl font-bold text-slate-800 mb-4">找回密码</h3>
                <p class="text-slate-600 mb-6">请输入您的邮箱地址，我们将发送验证码给您</p>
                
                <form id="forgotPasswordForm">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-slate-700 mb-2">邮箱地址</label>
                        <div class="relative">
                            <i class="fas fa-envelope absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                            <input type="email" id="email" class="w-full pl-10 pr-4 py-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="请输入邮箱" required>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-slate-700 mb-2">验证码</label>
                        <div class="flex space-x-2">
                            <input type="text" id="verifyCode" class="flex-1 px-4 py-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="请输入验证码" required>
                            <button type="button" id="sendCode" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                发送验证码
                            </button>
                        </div>
                    </div>
                    
                    <div class="flex space-x-3">
                        <button type="button" id="cancelReset" class="flex-1 px-4 py-3 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                            取消
                        </button>
                        <button type="submit" class="flex-1 gradient-bg text-white py-3 rounded-lg hover:shadow-lg transition-all">
                            重置密码
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <script>
        // 密码显示/隐藏切换
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');
        
        togglePassword.addEventListener('click', () => {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            togglePassword.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
        });
        
        // 忘记密码模态框
        const forgotPassword = document.getElementById('forgotPassword');
        const forgotPasswordModal = document.getElementById('forgotPasswordModal');
        const cancelReset = document.getElementById('cancelReset');
        
        forgotPassword.addEventListener('click', (e) => {
            e.preventDefault();
            forgotPasswordModal.classList.remove('hidden');
        });
        
        cancelReset.addEventListener('click', () => {
            forgotPasswordModal.classList.add('hidden');
        });
        
        // 点击模态框外部关闭
        forgotPasswordModal.addEventListener('click', (e) => {
            if (e.target === forgotPasswordModal) {
                forgotPasswordModal.classList.add('hidden');
            }
        });
        
        // 发送验证码倒计时
        const sendCode = document.getElementById('sendCode');
        let countdown = 60;
        
        sendCode.addEventListener('click', () => {
            if (countdown === 60) {
                sendCode.disabled = true;
                const timer = setInterval(() => {
                    countdown--;
                    sendCode.textContent = `${countdown}秒后重发`;
                    if (countdown <= 0) {
                        clearInterval(timer);
                        sendCode.textContent = '发送验证码';
                        sendCode.disabled = false;
                        countdown = 60;
                    }
                }, 1000);
            }
        });
        
        // 登录表单提交
        const loginForm = document.getElementById('loginForm');
        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            // 模拟登录验证
            if (username && password) {
                // 保存记住密码状态
                if (document.getElementById('rememberMe').checked) {
                    localStorage.setItem('username', username);
                    localStorage.setItem('rememberPassword', 'true');
                } else {
                    localStorage.removeItem('username');
                    localStorage.removeItem('rememberPassword');
                }
                
                // 跳转到主页
                window.location.href = 'dashboard.html';
            }
        });
        
        // 页面加载时检查记住的用户名
        window.addEventListener('load', () => {
            if (localStorage.getItem('rememberPassword') === 'true') {
                document.getElementById('username').value = localStorage.getItem('username') || '';
                document.getElementById('rememberMe').checked = true;
            }
        });
        
        // 忘记密码表单提交
        const forgotPasswordForm = document.getElementById('forgotPasswordForm');
        forgotPasswordForm.addEventListener('submit', (e) => {
            e.preventDefault();
            alert('密码重置链接已发送到您的邮箱');
            forgotPasswordModal.classList.add('hidden');
        });
    </script>
</body>
</html>